<template>
  <section class="component case-excel-import">
    <el-form ref="form" :model="importModel" label-width="150px" :rules="rules">
      <el-form-item label="委托方" prop="principalId">
        <el-select
          placeholder="请选择"
          v-model="importModel.principalId"
          @change="getTemplate"
        >
          <el-option
            v-for="item in principalList.content"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="模板名称" prop="templateId">
        <el-select placeholder="请选择" v-model="importModel.templateId">
          <el-option
            v-for="item in templateList"
            :label="item.name"
            :value="item.templetId"
            :key="item.templetId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上传文件">
        <file-upload
          ref="upload_case_import"
          :fileList.sync="fileList"
          :fileNumberLimit="1"
          :AllowExtension="['xlsx']"
        ></file-upload>
      </el-form-item>
    </el-form>
    <div class="operate-buttons">
      <el-button @click="emitClose">取消</el-button>
      <el-button @click="submit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import { Dependencies } from "~/core/decorator";
import { State, Getter, Action, namespace } from "vuex-class";
import { Emit, Component } from "vue-property-decorator";
import FileUpload from "~/components/common/file-upload.vue";
import { DataImportExcelInfoService } from "~/services/dataimp-service/data-import-excel-info.service";
import { PageService } from "~/utils/page.service";

@Component({
  name: "case-excel-import",
  components: {
    FileUpload
  }
})
export default class CaseExcelImport extends Vue {
  @State private principalList: any;
  @Dependencies(DataImportExcelInfoService)
  private importExcelService: DataImportExcelInfoService;

  private importModel: any = {
    id: "", // 委托方ID
    delegationDate: "", // 委案日期
    closeDate: "", // 结案日期
    fileId: "", // 文件id
    templateId: "",
    memo: "", // 备注
    companyCode: "",
    principalId: "",
    principalName: "",
    recoverWay: 0
  };
  private templateList: any[] = [];
  private rules: any = {
    principalId: [{ required: true, message: "请选择委托方" }],
    templateId: [{ required: true, message: "请选择模板名称" }]
  };
  private fileList: any = [];

  @Emit("close")
  private emitClose() {
    const upload: any = this.$refs["upload_case_import"];
    upload.reset();
    const dataform: any = this.$refs["form"];
    dataform.resetFields();
  }

  @Emit("success")
  private emitSuccess() {
    this.$message.success("案件正在后台导入,请等待数据刷新");
    this.emitClose();
  }

  // 获取模板
  private getTemplate() {
    this.importModel.templateId = "";
    this.importExcelService
      .findTempletByPrincipalId({
        principalId: this.importModel.principalId
      })
      .subscribe(data => {
        this.templateList = data;
      });
  }

  private submit() {
    if (this.fileList.length === 0) {
      this.$message("请上传导入文件");
      return;
    }
    // 存储文件ID
    this.importModel.fileId = this.fileList[0].response.id;
    // 委托方名称
    const principal = this.principalList.content.find(
      v => v.id === this.importModel.principalId
    );
    this.importModel.principalName = principal ? principal.name : "";
    const dataForm: any = this.$refs["form"];
    dataForm.validate(valid => {
      if (!valid) return;
      this.importExcelService
        .importExcelData(this.importModel)
        .subscribe(this.emitSuccess);
    });
  }
}
</script>
